<template>
  <div class="home_main">
    <a-layout style="height: 100%; position: relative">
      <a-layout-header style="height: 84px"
        ><div class="logoHome">
          <img src="@/image/homePage.png" alt="" />
        </div>
        <div class="toLogin" @click="toLogin">
          <ImportOutlined style="margin-right: 8px" />
          退出登录
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="20em">
          <a-menu
            style="height: 100%"
            theme="dark"
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            @click="handleClick"
          >
            <router-link to="/homePage">
              <a-menu-item key="homePage">
                <template #icon>
                  <HomeOutlined />
                </template>
                <span>首页</span>
              </a-menu-item>
            </router-link>
            <a-sub-menu key="1" @titleClick="titleClick">
              <template #icon>
                <StarOutlined />
              </template>
              <template #title>硒都简介</template>
              <router-link to="/introduction">
                <a-menu-item key="introduction">展示简介</a-menu-item>
              </router-link>
              <router-link to="/modyfiintroduction">
                <a-menu-item key="modyfiintroduction">修改展示简介</a-menu-item>
              </router-link>
            </a-sub-menu>
            <a-sub-menu key="2" @titleClick="titleClick">
              <template #icon>
                <CoffeeOutlined />
              </template>
              <template #title>硒都美食</template>
              <router-link to="/foot">
                <a-menu-item key="foot">展示美食</a-menu-item>
              </router-link>
              <router-link to="/addfoot">
                <a-menu-item key="addfoot">添加展示美食</a-menu-item>
              </router-link>
              <router-link to="/modifyfoot">
                <a-menu-item key="modifyfoot">修改展示美食</a-menu-item>
              </router-link>
              <router-link to="/delfoot">
                <a-menu-item key="delfoot">删除展示美食</a-menu-item>
              </router-link>
            </a-sub-menu>
            <a-sub-menu key="3" @titleClick="titleClick">
              <template #icon>
                <CloudOutlined />
              </template>
              <template #title>硒都景色</template>
              <router-link to="/scenery">
                <a-menu-item key="scenery">展示景色</a-menu-item>
              </router-link>
              <router-link to="/addscenery">
                <a-menu-item key="addscenery">添加展示景色</a-menu-item>
              </router-link>
              <router-link to="/modifyscenery">
                <a-menu-item key="modifyscenery">修改展示景色</a-menu-item>
              </router-link>
              <router-link to="/delscenery">
                <a-menu-item key="delscenery">删除展示景色</a-menu-item>
              </router-link>
            </a-sub-menu>
            <a-sub-menu key="4" @titleClick="titleClick">
              <template #icon>
                <FieldTimeOutlined />
              </template>
              <template #title>硒都节日</template>
              <router-link to="/festival">
                <a-menu-item key="festival">展示节日</a-menu-item>
              </router-link>
              <router-link to="/addfestival">
                <a-menu-item key="addfestival">添加展示节日</a-menu-item>
              </router-link>
              <router-link to="/modifyfestival">
                <a-menu-item key="modifyfestival">修改展示节日</a-menu-item>
              </router-link>
              <router-link to="/delfestival">
                <a-menu-item key="delfestival">删除展示节日</a-menu-item>
              </router-link>
            </a-sub-menu>
          </a-menu>
        </a-layout-sider>
        <a-layout-content>
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import {
  HomeOutlined,
  CoffeeOutlined,
  FieldTimeOutlined,
  CloudOutlined,
  StarOutlined,
  ImportOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router"
export default defineComponent({
  components: {
    HomeOutlined,
    CoffeeOutlined,
    FieldTimeOutlined,
    CloudOutlined,
    StarOutlined,
    ImportOutlined,
  },
  setup() {
    //menu attribute
    const selectedKeys = ref<string[]>(["homePage"]); //选中
    const openKeys = ref<string[]>(["sub1"]); //展开

    const handleClick = (e: Event) => {};
    const titleClick = (e: Event) => {};

    //hash change
    const pathIsHash = () => {
      const query = window.location.pathname.split("/")[1];
      if (query != "homePage") {
        if (query.indexOf("introduction") != -1) openKeys.value[0] = "1";
        if (query.indexOf("foot") != -1) openKeys.value[0] = "2";
        if (query.indexOf("scenery") != -1) openKeys.value[0] = "3";
        if (query.indexOf("festival") != -1) openKeys.value[0] = "4";
      }
      selectedKeys.value[0] = query;
    };
    onMounted(() => {
      pathIsHash();
    });


    const router = useRouter()
    const toLogin = ()=>{
      router.push({
        path:"/login"
      })
      localStorage.removeItem("token");
    }

    return {
      selectedKeys,
      handleClick,
      titleClick,
      openKeys,
      toLogin
    };
  },
});
</script>

<style lang="less" scoped>
.home_main {
  overflow: hidden;
  width: 100%;
  height: 100%;
  .logoHome {
    width: 100%;
    background: #001529;
  }
  .toLogin {
    color: white;
    position: absolute;
    top: 27px;
    right: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 30px;
  }
  .toLogin:hover{
    color: #ffcc33;
  }
}
</style>
